<script setup lang="ts">
import { watch, onMounted } from 'vue'
import * as echarts from 'echarts/core'
import { useEcharts } from './echarts.ts'
import { api_getHomeBaseInfo, api_getWeatherChartData, api_getwaterTemperature } from '~@/api/common/home.module'
import dayjs from 'dayjs'


const { domRef, updateOptions } = useEcharts(() => ({
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter(params) {
      return `银座站: zhangsan <br/> 威高广场: zhangsan`
    },
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLabel: {
      inside: true,
      color: '#fff',
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    z: 10,
  },
  axisLine: {
    show: false,
  },
  axisTick: {
    show: false,
  },
  yAxis: {
    type: 'category',
    // 北洋大厦站  妇幼水疗站 四0四医院站 威高广场站 阳光大厦站(2403) 高区税务局站 威高盛祥站 园林站 海港大厦公建站 耳鼻喉站

    data: ['北洋大厦站', '妇幼水疗站', '四0四医院站', '威高广场站', '阳光大厦站(2403', '高区税务局站', '威高盛祥站', '园林站', '海港大厦公建站'],
    position: 'left', // 将 yAxis 靠左显示

  },
  series: [
    {
      name: '2011',
      label: {
        show: true,
        position: 'right',
        valueAnimation: true,
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#FE9713' },
          { offset: 0.5, color: '#FFAA13' },
          { offset: 1, color: '#FFBC16' },
        ]),
      },
      type: 'bar',
      data: [10, 20, 30, 40, 50, 60, 70, 25, 56, 54, 32],
    },
  ],
}))


const waterTemperatureList = ref([]);


async function getwaterTemperature() {
  await api_getwaterTemperature().then(res => {
    if (res.data.isSuccess) {

      waterTemperatureList.value = res.data.result;
      waterTemperatureList.value = waterTemperatureList.value.slice(0, 10);
      console.log("unitConsumption __________________", waterTemperatureList.value)


      updateOptions((opts, factory) => {
        console.log("waterTemperatureList ____________________________", waterTemperatureList.value.map(item => item.name));
      opts.yAxis.data = waterTemperatureList.value.map(item => item.name);
      opts.series[0].data = waterTemperatureList.value.map(item => item.backTem);
      return opts
    })
}
  })
}

// defineOptions({
//   name: 'LineChart',
// })


async function mockData() {
  await new Promise((resolve) => {
    setTimeout(resolve, 1000)
  })

  // updateOptions((opts) => {
  //   opts.xAxis.data = ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
  //   opts.series[0].data = [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
  //   opts.series[1].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
  //   opts.series[2].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
  //   opts.series[3].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
  //   return opts
  // })
}

function updateLocale() {
  updateOptions((opts, factory) => {
    const originOpts = factory()
    opts.yAxis.data = waterTemperatureList.value.map(item => waterTemperatureList.name)
    opts.series[0].name = originOpts.series[0].name
    opts.series[1].name = originOpts.series[1].name

    return opts
  })
}

async function init() {
  // mockData()
}

init()

onMounted(async () => {
  await getwaterTemperature()

})
</script>

<template>
  <div ref="domRef" class="h-360px w-280px" />
</template>

<style scoped>
div {
  position: relative;
  top: -53px;
}
</style>
